<template>
  <div class="all-inventory">
    <div id="chart_center" class="chart" ></div>
  </div>
</template>

<script>
export default {
    name: "allInventoryComponent",
    data(){
        return {
            xAxisData: Array.from({length: 30}, (_, i) => i < 9 ?`11-0${i+1}` :`11-${i+1}`  ),
            data_fok1: [],
            data_efo1: [],
            data_bcpc: [],
            data_mmt1: [],
            data_emt1:[],
            data_all:[]
        }
    },
    mounted() {
        this.setData()
        this.getChart()
    },
    methods: {
        setData() {
            this.xAxisData.forEach((index,item) => {
                const fok1 =  +((Math.random() * 2000)+ 1000).toFixed(2)
                this.data_fok1.push(fok1)
                const efo1 = +((Math.random() * 2000)+ 1000).toFixed(2)
                this.data_efo1.push(efo1)
                const bcpc =  +((Math.random() * 2000)+ 1000).toFixed(2)
                this.data_bcpc.push(bcpc)
                const mmt1 =  +((Math.random() * 2000)+ 1000).toFixed(2)
                this.data_mmt1.push(mmt1)
                const emt1 =  +((Math.random() * 2000)+ 1000).toFixed(2)
                this.data_emt1.push(emt1)
                // this.data_all.push(+(fok1 + efo1 + bcpc + mmt1 + emt1).toFixed(2))
            })
        },  
        getChart() {
            const chartDom = document.getElementById('chart_center');
            const myChart = this.$echarts.init(chartDom);
            let option;
            option = {
                title: {
                    text: '库存金额',
                    textAlign: 'center',
                    left: '50%',
                    textStyle: {
                        color: '#fff',
                        fontWeight: 400,
                        fontSize: '0.225rem'
                    }
                    
                },
                grid:{
                    top: '10%',
                    left: '1%',
                    right: '1%',
                    bottom: '3%',
                    containLabel: true
                },
                toolbox: {
                    top: '0',
                    iconStyle: {
                        color: '#fff'
                    },
                    feature: {
                        magicType: {
                            type: ['bar','line',''],
                            emphasis: {
                                iconStyle: {
                                    color: '#fff'
                                }
                            }
                        },
                        saveAsImage: {}
                        
                    // dataView: {}
                    }
                },
                dataZoom: [
                    {
                    startValue: '11-01'
                    },
                    {
                    type: 'inside'
                    }
                ],
                tooltip: {
                    trigger: 'axis',
                    formatter: (params) => {
                        console.log(params)
                        let total = 0;
                        let tooltipContent = `日期: ${params[0].name}<br/>`
                        tooltipContent += params.map(item => {
                            total += item.data; // 计算堆叠总数
                            return `<span style="display:inline-block;width:10px;height:10px;background-color:${item.color};border-radius:50%;margin-right:5px;"></span>${item.seriesName}: ${item.data}`; // 显示每个系列的值和颜色小圈
                        }).join('<br/>');
                        tooltipContent += `<br/>总计: ${total.toFixed(2)}`; // 添加总计
                        return tooltipContent; // 返回自定义的 tooltip 内容
                    }
                },
                xAxis: {
                    data: this.xAxisData,
                    name: '日期',
                    axisLabel: {
                        textStyle: {
                            color: '#b3ccf8',
                            fontSize: 13
                        },
                    },
                    // axisLine: { onZero: true },
                    // splitLine: { show: false },
                    // splitArea: { show: false }
                },
                yAxis: {
                    type:'value',
                    axisLabel: {
                        textStyle: {
                            color: '#b3ccf8',
                            fontSize: 13
                        },
                    }
                },
                series: [
                    {
                        name:'成品',
                        type: 'line',
                        smooth: true,
                        showSymbol: false,
                        stack: 'inventory',
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowColor: 'rgba(0,0,0,0.3)'
                            }
                        },
                        data: this.data_fok1
                    },
                    {
                        name:'实验成品',
                        type: 'line',
                        smooth: true,
                        showSymbol: false,
                        stack: 'inventory',
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowColor: 'rgba(0,0,0,0.3)'
                            }
                        },
                        data: this.data_efo1
                    },
                    {
                        name:'半成品',
                        type: 'line',
                        smooth: true,
                        showSymbol: false,
                        stack: 'inventory',
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowColor: 'rgba(0,0,0,0.3)'
                            }
                        },
                        data: this.data_bcpc
                    },
                    {
                        name:'量产材料',
                        type: 'line',
                        smooth: true,
                        showSymbol: false,

                        stack: 'inventory',
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowColor: 'rgba(0,0,0,0.3)'
                            }
                        },
                        data: this.data_mmt1
                    },
                    {
                        name:'实验材料',
                        type: 'line',
                        smooth: true,
                        stack: 'inventory',
                        showSymbol: false,
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowColor: 'rgba(0,0,0,0.3)'
                            }
                        },
                        data: this.data_emt1
                    }
                ]
            }
            option && myChart.setOption(option);
            window.addEventListener('resize', () => {
                 myChart.resize()
            })
        }
    }
}
</script>

<style lang="scss" scoped>
    .all-inventory {
        .chart {
            height: 5.2rem;
            width: 100%;
        }
    }
</style>